<template>
  <a-drawer
    title="支付宝充值"
    placement="right"
    :closable="true"
    @ok="handleOkFunc"
    :visible="isShow"
    width="600"
    @close="onClose"
    :maskClosable="false">
    <a-form-model
      ref="infoFormModel"
      :model="saveObject"
      :rules="rules"
      style="padding-bottom:50px"
      layout="vertical"
    >
      <a-row justify="space-between" type="flex">
        <a-col :span="24	">
          <a-form-model-item label="充值金额:" prop="money">
            <a-input v-model="saveObject.money" />
          </a-form-model-item>
        </a-col>

        <a-col :span="24">
            <div style="text-align:center;padding:0 0 20px;">
				<img :src="rechargeInfo.rechargeQR" width="300" alt="">
			</div>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="请输入支付宝订单编号：" prop="alipayOrderNo">
            <a-input v-model="saveObject.alipayOrderNo" placeholder="请输入支付宝订单编号点击确认充值"/>
          </a-form-model-item>
        </a-col>
		
      </a-row>
	<p class="redTip">支付宝免费充值时间为早上9点到晚上6点，超过此时间支付宝充值收钱千分之3手续费，另外考虑到大家应急充值，特开设了非工作时间银行卡应急免费充值3000元额度。银行卡总免费充值额度为：工作时间内5000以内免费另外加晚上3000元应急额度总计8000元额度。（以上是会员用户标准，非会员用户标准全天只有3000元免费充值额度）</p>
      <div class="drawer-btn-center">
        <a-button :style="{ marginRight: '8px' }" @click="onClose" icon="close">取消</a-button>
        <a-button type="primary" @click="handleOkFunc" icon="check" :loading="confirmLoading">提交充值订单</a-button>
      </div>

    </a-form-model>
  </a-drawer>
</template>

<script>
	import { sendRecharge,reconciliationRecharge} from '@/api/manage'
	import { getInfo } from '@/api/login'
	export default {
		// props: {
		// 	callbackFunc: {
		// 		type: Function,
		// 		default: () => ({})
		// 	}
		// },
		data () {
			return {
				confirmLoading: false, // 显示确定按钮loading图标
				isShow: false, // 是否显示弹层/抽屉
				saveObject: {}, // 数据对象
      			rechargeInfo:{},
				rules: {
					money: [{
						required: true,
						message: '请输入充值金额',
						trigger: 'blur'
					}],
					alipayOrderNo: [{
						required: true,
						message: '请输入支付宝订单编号',
						trigger: 'blur'
					}],
				}
			}
		},
		created(){
			this.getInfo();
		},
		methods: {
			getInfo () {
				sendRecharge().then(res => {
					this.rechargeInfo = res;
				}).catch(err => {
					console.error(err)
				})
			},
			show () {
				if (this.$refs.infoFormModel !== undefined) {
					this.$refs.infoFormModel.resetFields()
				}
				// 数据恢复为默认数据
				this.saveObject = {
					money: '',
					alipayOrderNo: ''
				}
				this.confirmLoading = false // 关闭loading
				this.isShow = true
			},
			handleOkFunc: function () { // 点击【确认】按钮事件
				const that = this
				this.$refs.infoFormModel.validate(valid => {
					if (valid) { // 验证通过
						// 请求接口
						that.loading = true // 打开按钮上的 loading
						that.confirmLoading = true // 显示loading
						reconciliationRecharge({
							alipayOrderNo: this.saveObject.alipayOrderNo,
							money:this.saveObject.money,
							appId:this.rechargeInfo.appId
						}).then(res => {
							if(res==1){
								this.$message.success('充值提交成功，等待确认');
							}else{
								this.$message.success('充值提交成功');
							}
							this.isShow = false;
							getInfo().then(bizData => {
								this.$store.commit('SET_USER_INFO', bizData) // 调用vuex设置用户基本信息
							})
						}).catch(err => {
							that.confirmLoading = false
							console.error(err)
						})
					}
				})
			},
			// 点击遮罩层关闭抽屉
			onClose () {
				this.isShow = false
			},
		}
	}
</script>

<style lang="less" scoped>
.redTip{
  color: red;
  font-size: 18px;
  padding: 0 5px;
}
</style> 
